<link rel="stylesheet" href="/api-ui/static/bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="/api-ui/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/api-ui/static/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css"/>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css"/>
<style type="text/css">
    a {
        color: black;
    }

    a:hover {
        text-decoration: none;
    }

    .bgc-w {
        background-color: #fff;
    }
</style>
<!--vue脚本库-->
<script type="text/javascript"
		src="/api-ui/static/js/vue/vue-3.2.4.global.js">
</script>
<!--axios脚本库-->
<script type="text/javascript"
		src="/api-ui/static/js/vue/axios-0.18.0.min.js">
</script>
<!--我们自己封装的axios函数库 -->
<script type="text/javascript"
		src="/api-ui/static/js/vue/axios-helper.js">
</script>
<body id="app">
<div class="row" style="padding-top: 10px;">
    <div class="col-md-2">
        <h1 style="font-size: 24px; margin: 0;" class="">类型管理</h1>
    </div>
    <div class="col-md-10 text-right">
        <a href="index"><span class="glyphicon glyphicon-home"></span> 首页</a> >
        <a disabled="disabled">类型管理</a>
    </div>
</div>

<div class="row" style="padding-top: 15px;">
    <div class="col-md-12">
        <!--id="container"-->
        <div class="bgc-w box box-primary">
            <!--盒子头-->
            <div class="box-header">
                <h3 class="box-title">
                    <a href="typeadd.html" class="label label-success" style="padding: 5px;">
                        <span class="glyphicon glyphicon-plus"></span> 新增
                    </a>
                    <a href="" class="label label-success" style="padding: 5px;margin-left:5px;">
                        <span class="glyphicon glyphicon-refresh"></span> 刷新
                    </a>
                </h3>
                <div class="box-tools">
                    <div class="input-group" style="width: 150px;">
                        <input type="text" class="form-control input-sm baseKey"  v-model="condition"
                               placeholder="按名称/模块查找"/>
                        <div class="input-group-btn">
                            <a href="javascript:void(0)" class="btn btn-sm btn-default " @click="queryByCondition"><span
                                    class="glyphicon glyphicon-search"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--盒子身体-->
            <div class="box-body no-padding thistable">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <tr>
                            <th scope="col">模块</th>
                            <th scope="col">类型</th>
                            <th scope="col">排序值</th>
                            <!-- <th scope="col">颜色</th> -->
                            <th scope="col">操作</th>
                        </tr>
                        <tr v-for="type in typeList">
                            <td><span>{{type.typeModel}}</span></td>
                            <td><span>{{type.typeName}}</span></td>
                            <td><span>{{type.sortValue}}</span></td>
                            <!-- <td><span>red</span></td> -->
                            <td>
                                <a href="javascript:void(0)"
                                   class="label xiugai" @click="update(type.typeId)"><span class="glyphicon glyphicon-edit"></span>修改</a>
                                <a title="查看详细信息" href="javascript:void(0)" class="label xiugai" @click="search(type.typeId)">
                                    <span class="glyphicon glyphicon-search"></span> 查看</a>
                                <a href="javascript:void(0)" class="label shanchu" @click="del(type.typeId)"><span
                                    class="glyphicon glyphicon-remove"></span> 删除</a></td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--盒子尾-->
        </div>
    </div>
</div>
</body>
<script type="module">
	Vue.createApp({
		data() {
			return {
				typeList:[],
				condition:null
			}
		},
		created() {
			this.loadList();
		},
		methods: {
			queryByCondition(){
				if(this.condition ==null || this.condition==""){
					alert("查询条件不能为空，否则查询全部呢");
					this.loadList();
				}else {
					requestGet("/api-core/aoaTypeList/queryList",{
						typeModel:this.condition,
					}).then((data)=>{
						this.typeList=data;
					})
				}
			},
			loadList(){
				//查询类型列表
				requestGet("/api-core/aoaTypeList/queryList").then((data)=>{
					console.info(data);
					this.typeList=data;
				})
			},
            update(typeId){
                sessionStorage.setItem("typeId",typeId);
                window.location.href="/api-ui/page/typeedit.html";
            },
            search(typeId){
                sessionStorage.setItem("typeId",typeId);
                window.location.href="/api-ui/page/typeslook.html";
            },
            del(typeId){
                let bool=confirm("删除后不可恢复哦？确定删除吗？")
                if(!bool){
                    return ;
                }
                requestDelete("/api-core/aoaTypeList/delete",{
                    id:typeId
                }).then((data)=>{
                    if(data){
                        alert("删除成功");
                        this.loadList();
                    }else {
                        alert("删除失败");
                    }
                })

            }
		}
	}).mount("#app");
</script>
